<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li>a{
            color: blue;
            margin-left: 5px;
            cursor: pointer;
        }
    </style>

    <!-- 引入Vue框架 -->
    <script src="./vue.global.js"></script>
</head>
<body>
    <!-- 待渲染的模板 -->
    <div id="app"></div>

    <script>
        // 创建根组件TodoList
        const TodoList = {
            // 组件的模板/DOM结构
            template:`
            <h3>Todos</h3>
            <hr>

            <!--采集用户的输入-->
            <div>
                <!--双向数据绑定：input的默认value为userInput对应的值 如果用户输入则同步到userInput -->
                <input v-model="userInput"/>

                <!--点击事件由addTodo函数处理-->
                <button @click="addTodo">ADD</button>    
            </div>

            <!--待办事项显示区-->
            <ul>
                <!--
                v-for="(item,index) of todos"  todos里有几个数据就渲染几个todo-item子组件
                :todo="item" 给子组件注入数据 子组件必须有接收父组件注入的数据声明
                @godie="deleteTodo(index)"  当子组件发送自定义事件godie时 以deleteTodo(index)处理之 子组件中必须有要发送的自定义事件声明
                -->
                <todo-item 
                    v-for="(item,index) of todos" 
                    :todo="item"
                    @godie="deleteTodo(index)"
                />

            </ul>
            `,

            // 组件的数据闭包
            data(){
                return {
                    // 待办事项列表
                    todos:[
                        {id:1,title:"杀到东京"},
                        {id:2,title:"夺了鸟位"},
                        {id:3,title:"让俺哥哥当大宋皇帝"},
                    ],

                    // 双向绑定用户的输入
                    userInput:"带领火鸡们撸React"
                }
            },

            // 组件交互逻辑
            methods:{
                /*添加一个待办事项*/
                addTodo(){
                    // 更新数据 添加一项待办事项 视图自动响应
                    // 此之谓【数据驱动视图】
                    this.todos.push({
                        id:this.todos.length+1,//id为长度加一
                        title:this.userInput//title为用户的输入
                    })

                    // 清空userInput数据 input框也会随之被清空
                    this.userInput = ""
                },

                /*删除一个待办事项*/
                // index来自发送自定义事件godie的todo-item子组件的序号
                deleteTodo(index){
                    // 从index位置向后删除一个数组元素
                    this.todos.splice(index,1)
                },
            }
        }

        // 以TodoList为根组件创建应用程序实例
        const app = Vue.createApp(TodoList)

        // 定义组件
        app.component(
            // 子组件的名字
            "todo-item",

            /*子组件的详细配置*/
            {
                // 模板
                template:`
                <!--
                {{todo.title}} 插值表达式 todo为父组件注入的数据 
                @click="onGoDieClick" 点击事件处理
                -->
                <li>
                    {{todo.title}}
                    <a @click="onGoDieClick">狗带</a>
                </li>
                `,

                // 接收来自父组件的那些属性
                props:["todo"],

                // 向父组件发送的自定义事件
                emits:["godie"],

                // 组件的交互逻辑
                methods:{

                    /*当用户点击【狗带】时调用*/
                    onGoDieClick(){
                        console.log("onGoDieClick");

                        // 通知父组件 用户点击了我的狗带
                        // 向父组件发送自定义事件
                        this.$emit("godie")
                    }
                }
            }
        )

        // 将应用程序的实例挂在到DOM结构中
        app.mount("#app")
    </script>
</body>
</html>